import React, {useEffect, useState} from "react";
import {DataNode} from "@/pages/script";
import {Button, Form, Input, message, Modal, Radio, Space, Spin, Switch} from "antd";
import {CheckOutlined, PoweroffOutlined} from "@ant-design/icons";
import styled from "@emotion/styled";
import {httpPost, Result} from "@/utils/http";
import {ServerScriptListProp} from "@/pages/script/components/script";

interface ModelProp {
	serverId: number;
	visible: boolean;
	onCancel: (newData?: ServerScriptListProp) => void;
}

interface ScriptCreateProp {
	title: string;
	desc?: string;
	parent_id: number;
	file_name: string;
	content: string;
	script_type: number;
	script_param: string;
	log_file: string;
}

export const ScriptAdd: React.FC<ModelProp> = ({serverId, visible, onCancel}) => {

	const [spinning, setSpinning] = useState<boolean>(false);
	const [scriptType, setScriptType] = useState<number>(1);
	const [form] = Form.useForm<ScriptCreateProp>();


	const submitData = () => {
		form.validateFields().then(value => {
			setSpinning(true);
			httpPost<Result<ServerScriptListProp>, ScriptCreateProp>('/server/script/create', {...value}).then(res => {
				if (res.code === 100200) {
					message.success(res.message);
					closeModel(res.result)
				} else {
					message.error(res.message);
				}
			}).finally(() => {
				setSpinning(false);
			})
		})
	}

	const changeScriptType = (value: number) => {
		setScriptType(value);
		form.setFieldValue("script_type", value);
	}

	const closeModel = (data?: ServerScriptListProp) => {
		form.resetFields();
		onCancel(data);
	}

	useEffect(() => {
		form.setFieldValue("script_type", 1);
		form.setFieldValue("parent_id", serverId);
	}, [visible])

	return <Container
		width='35vw'
		destroyOnClose
		maskClosable={false}
		onCancel={() => onCancel(undefined)}
		open={visible}
		title="创建脚本"
		okText="保存"
		cancelText="取消"
		footer={
			<Space>
				<Button type="primary" danger icon={<PoweroffOutlined />} onClick={() => closeModel(undefined)}>关闭</Button>
				<Button type="primary" icon={<CheckOutlined />} onClick={submitData}>保存</Button>
			</Space>
		}
	>
		<Spin tip="服务脚本数据提交中......" spinning={spinning}>
			<Form labelCol={{ span: 4 }}
						wrapperCol={{ span: 20 }}
						form={form}
						layout="horizontal"
						name="form_in_modal"
			>
				<Form.Item name="parent_id" style={{display: 'none'}}>
					<Input placeholder="parent_id" />
				</Form.Item>
				<Form.Item name="title" label="脚本名称" rules={[{ required: true, message: '请输入脚本名称' }]}>
					<Input placeholder="脚本名称" />
				</Form.Item>
				<Form.Item name="script_type" label="脚本类型" rules={[{ required: true, message: '请选择脚本类型' }]}>
					<Radio.Group onChange={e => changeScriptType(e.target.value)}>
						<Radio value={1}>命令</Radio>
						<Radio value={2}>脚本</Radio>
					</Radio.Group>
				</Form.Item>
				<Form.Item name="file_name" label="文件名称">
					<Input placeholder="文件名称" disabled={scriptType == 1}/>
				</Form.Item>
				<Form.Item name="content" label="内容" rules={[{ required: true, message: '请输入内容' }]}>
					<Input.TextArea rows={5} placeholder="请输入内容" />
				</Form.Item>
				<Form.Item name="script_param" label="执行参数">
					<Input placeholder="执行参数" />
				</Form.Item>
				<Form.Item name="log_file" label="日志文件">
					<Input placeholder="日志文件" />
				</Form.Item>
				<Form.Item name="desc" label="备注">
					<Input.TextArea rows={2} placeholder="请输入备注" />
				</Form.Item>
			</Form>
		</Spin>
	</Container>
}

const Container = styled(Modal)`
	.ant-modal-body {
		margin-top: 30px;
	}
`